<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li{
            list-style: none;
        }
        .oli{
            width: 200px;
            height: 350px;
            border: 1px solid #ccc;
            text-align: center;
            float: left;
            margin-left: 20px;
            margin-bottom: 20px;
        }
        .oli img{
            width: 100px;
            height: 100px;
        }
        .p1{
            text-decoration:line-through;
        }
        .p2{
            color: red;
        }
    </style>
</head>
<body>
    <button id="btn1">价格升序</button>
    <button id="btn2">价格降序</button>
    <button id="btn3">销量升序</button>
    <button id="btn4">销量降序</button>
    <button id="btn5">评价升序</button>
    <button id="btn6">评价降序</button>
    <ul id="libox">
        <!-- <li class="oli">
            <img src="" alt="">
            <h2>node</h2>
            <p>颜色:</p>
            <p>原价:</p>
            <p>现价:</p>
            <p>销量:</p>
            <p>评价:</p>
        </li> -->
    </ul>
    <script>
        var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];

        function call(){
            for(var i=0; i<data.length;i++){
            libox.innerHTML+=`
            <li class="oli">
            <img src="${data[i].imgurl}" alt="">
            <h2>${data[i].name}</h2>
            <p>颜色:${data[i].color}</p>
            <p class="p1">原价:${data[i].price}</p>
            <p class="p2">现价:${data[i].sale}</p>
            <p>销量:${data[i].sales}</p>
            <p>评价:${data[i].evaluate}</p>
        </li>
                                `
        }
        }
       onload=function(){
        //    循环原始数据
           call()
        //    价格升序
           btn1.onclick=function(){
            //    清除原始数据
            libox.innerHTML=""
            data.sort(function(a,b){
                return a.sale-b.sale
            })
            call()
       }
    //    价格降序
       btn2.onclick=function(){
            libox.innerHTML=""
            data.sort(function(a,b){
                return b.sale-a.sale
            })
            call()
       }

        //    销量升序
        btn3.onclick=function(){
            //    清除原始数据
            libox.innerHTML=""
            data.sort(function(a,b){
                return a.sales-b.sales
            })
            call()
       }
    //    销量降序
       btn4.onclick=function(){
            libox.innerHTML=""
            data.sort(function(a,b){
                return b.sales-a.sales
            })
            call()
       }

         //    评价升序
         btn5.onclick=function(){
            //    清除原始数据
            libox.innerHTML=""
            data.sort(function(a,b){
                return a.evaluate-b.evaluate
            })
            call()
       }
    //    评价降序
       btn6.onclick=function(){
            libox.innerHTML=""
            data.sort(function(a,b){
                return b.evaluate-a.evaluate
            })
            call()
       }
       }
         
     
            
        
       
    </script>
</body>
</html>